<div class="lv-date-picker-calendar-container">
  <div *ngIf="lvPickerMode != 'simple'" class="calendar-panel">
    <div class="lv-date-picker-header">
      <ng-container *ngIf="showDatePanel">
        <div class="left" [class.lv-date-picker-header-icon-hidden]="lvQuickChangeMode === 'end'">
          <ng-container *ngTemplateOutlet="yearArrow; context: { num: -1, mode: 'prev' }"></ng-container>
          <ng-container *ngTemplateOutlet="monthArrow; context: { num: -1, mode: 'prev' }"></ng-container>
        </div>
        <div *ngIf="language == 'zh-cn'" class="center">
          <span
            *ngIf="lvCalendarYearOperate?.show"
            [ngClass]="{ readonly: lvPanelTitleReadonly || lvCalendarYearOperate?.disableChange }"
            (click)="setPanelState('year')"
          >
            {{ activeDateYear }}年
          </span>
          <span
            *ngIf="lvCalendarMonthOperate?.show"
            [ngClass]="{ readonly: lvPanelTitleReadonly || lvCalendarMonthOperate?.disableChange }"
            (click)="setPanelState('month')"
          >
            {{ activeDateMonth }}月
          </span>
        </div>
        <div *ngIf="language == 'en-us'" class="center">
          <span
            *ngIf="lvCalendarMonthOperate?.show"
            [ngClass]="{ readonly: lvPanelTitleReadonly || lvCalendarMonthOperate?.disableChange }"
            (click)="setPanelState('month')"
          >
            {{ activeDateMonth }}
          </span>
          <span
            *ngIf="lvCalendarYearOperate?.show"
            [ngClass]="{ readonly: lvPanelTitleReadonly || lvCalendarYearOperate?.disableChange }"
            (click)="setPanelState('year')"
          >
            {{ activeDateYear }}
          </span>
        </div>
        <div class="right" [class.lv-date-picker-header-icon-hidden]="lvQuickChangeMode === 'start'">
          <ng-container *ngTemplateOutlet="monthArrow; context: { num: 1, mode: 'next' }"></ng-container>
          <ng-container *ngTemplateOutlet="yearArrow; context: { num: 1, mode: 'next' }"></ng-container>
        </div>
      </ng-container>
    </div>
    <div class="lv-date-picker-body">
      <!-- for choose date -->
      <ng-container *ngIf="showDatePanel">
        <div class="lv-date-picker-calendar-header">
          <ul>
            <li *ngFor="let C_weekDay of C_weekDays; trackBy: trackByIndex">
              <span *ngIf="language == 'en-us'">{{ C_weekDay.short }}</span>
              <span *ngIf="language == 'zh-cn'">{{ C_weekDay.single }}</span>
            </li>
          </ul>
        </div>
        <div class="lv-date-picker-calendar-body" (mouseleave)="cellMouseLeave()">
          <ul *ngFor="let C_row of C_rows; trackBy: trackByIndex">
            <ng-container *ngIf="!(lvOnlyShowActiveCell && C_row.isBlank)">
              <ng-container *ngFor="let C_cell of C_row.cells; trackBy: trackByIndex">
                <li
                  *ngIf="lvOnlyShowActiveCell && (C_cell.isLastMonth || C_cell.isNextMonth)"
                  [ngClass]="C_cell.classMap"
                >
                  <span class="lv-date-picker-cell-hide"></span>
                </li>
                <li
                  *ngIf="!(lvOnlyShowActiveCell && (C_cell.isLastMonth || C_cell.isNextMonth))"
                  [ngClass]="C_cell.classMap"
                  (mouseenter)="C_cell.mouseenter()"
                >
                  <span
                    *ngIf="lvCalendarCell === null"
                    class="lv-date-picker-cell"
                    (click)="selectCalendarCell(C_cell)"
                  >
                    {{ C_cell.content }}
                  </span>
                  <span *ngIf="lvCalendarCell !== null" (click)="selectCalendarCell(C_cell)">
                    <ng-container *ngTemplateOutlet="lvCalendarCell; context: { $implicit: C_cell }"></ng-container>
                  </span>
                </li>
              </ng-container>
            </ng-container>
          </ul>
        </div>
      </ng-container>
    </div>

    <!-- for choose year -->
    <ng-container *ngIf="showYearPanel">
      <lv-date-picker-year
        [lvActiveDate]="activeDate"
        [value]="value"
        [lvTag]="lvTag"
        [lvPickerMode]="lvPickerMode"
        [lvDisabledDate]="lvDisabledDate"
        [lvCalendarYearCell]="lvCalendarYearCell"
        [lvOnlyShowActiveCell]="lvOnlyShowActiveCell"
        [lvPanelTitleReadonly]="lvPanelTitleReadonly"
        [lvCalendarYearOperate]="lvCalendarYearOperate"
        (valueChange)="yearChange($event)"
        (lvActiveDateChange)="activeDateChange($event)"
      ></lv-date-picker-year>
    </ng-container>
    <!-- for choose month -->
    <ng-container *ngIf="showMonthPanel">
      <lv-date-picker-month
        [lvActiveDate]="activeDate"
        [value]="value"
        [lvTag]="lvTag"
        [lvPickerMode]="lvPickerMode"
        [lvDisabledDate]="lvDisabledDate"
        [lvCalendarMonthCell]="lvCalendarMonthCell"
        [lvPanelTitleReadonly]="lvPanelTitleReadonly"
        [lvCalendarYearOperate]="lvCalendarYearOperate"
        (valueChange)="monthChange($event)"
        (lvActiveDateChange)="activeDateChange($event)"
      ></lv-date-picker-month>
    </ng-container>
  </div>

  <!-- 极简模式 -->
  <div *ngIf="lvPickerMode == 'simple'" class="calendar-panel max-width">
    <!--TODO-->
    <div class="lv-date-picker-header">
      <div class="left">
        <ng-container *ngTemplateOutlet="yearArrow; context: { num: -1, mode: 'prev' }"></ng-container>
        <ng-container *ngTemplateOutlet="monthArrow; context: { num: -1, mode: 'prev' }"></ng-container>
        <i lv-icon="lv-icon-arrow-prev" lvColorState="true" (click)="addDay(-1)"></i>
      </div>
      <div *ngIf="language == 'zh-cn'" class="center">
        <span *ngIf="lvCalendarYearOperate?.show" class="readonly">{{ activeDateYear }}年</span>
        <span *ngIf="lvCalendarMonthOperate?.show" class="readonly">{{ activeDateMonth }}月</span>
        <span class="readonly">{{ activeDateDay }}日</span>
      </div>
      <div *ngIf="language == 'en-us'" class="center">
        <span class="readonly">
          <ng-container *ngIf="lvCalendarMonthOperate?.show">{{ activeDateMonth }}</ng-container>
          {{ activeDateDay }},
        </span>
        <span *ngIf="lvCalendarYearOperate?.show" class="readonly">{{ activeDateYear }}</span>
      </div>
      <div class="right">
        <i lv-icon="lv-icon-arrow-next" lvColorState="true" (click)="addDay(1)"></i>
        <ng-container *ngTemplateOutlet="monthArrow; context: { num: 1, mode: 'next' }"></ng-container>
        <ng-container *ngTemplateOutlet="yearArrow; context: { num: 1, mode: 'next' }"></ng-container>
      </div>
    </div>
  </div>

  <!-- 时间选择 -->
  <div class="timer-panel" *ngIf="lvShowTime && lvPickerMode != 'simple'">
    <div class="lv-time-picker-header">
      <div *ngIf="value" class="display-time">{{ activeTimer }}</div>
    </div>
    <div class="lv-time-picker-body">
      <lv-time-picker-panel
        [ngModel]="value && value.localDate"
        [lvFormat]="timeFormat"
        [lvDisabledHour]="disabledHour"
        [lvDisabledMinute]="disabledMinute"
        [lvDisabledSecond]="disabledSecond"
        [lvNowAsBaseTime]="lvNowAsBaseTime"
        (ngModelChange)="selectTime($event)"
      ></lv-time-picker-panel>
    </div>
  </div>

  <ng-template #yearArrow let-num="num" let-mode="mode">
    <i
      *ngIf="lvCalendarYearOperate?.show"
      [lv-icon]="mode === 'prev' ? 'lv-icon-arrow-double-prev' : 'lv-icon-arrow-double-next'"
      lvColorState="true"
      [lvDisabled]="lvCalendarYearOperate?.disableChange"
      (click)="addYear(num)"
    ></i>
  </ng-template>
  <ng-template #monthArrow let-num="num" let-mode="mode">
    <i
      *ngIf="lvCalendarMonthOperate?.show"
      [lv-icon]="mode === 'prev' ? 'lv-icon-arrow-prev' : 'lv-icon-arrow-next'"
      lvColorState="true"
      [lvDisabled]="lvCalendarMonthOperate?.disableChange"
      (click)="addMonth(num)"
    ></i>
  </ng-template>
</div>

<div
  class="lv-date-picker-footer"
  *ngIf="
    lvPickerMode != 'simple' &&
    !lvIsRange &&
    (lvShowTime != false || lvShowTodayButton == true || lvFooterExtra !== null)
  "
>
  <div class="lv-date-picker-footer-extra" *ngIf="lvFooterExtra !== null">
    <ng-container [ngTemplateOutlet]="lvFooterExtra"></ng-container>
  </div>

  <div class="lv-date-picker-footer-content" *ngIf="lvShowTime != false || lvShowTodayButton == true">
    <ng-container *ngIf="lvShowTodayButton && lvShowTime == false">
      <button
        class="align-center"
        lv-button
        lvType="link"
        lvSize="auto"
        [disabled]="disabledTodayButton"
        (click)="selectToday()"
      >
        {{ i18n.get('today') }}
      </button>
    </ng-container>

    <ng-container *ngIf="lvShowTime != false">
      <button
        [ngClass]="{ 'align-center': !lvOpenObserver }"
        lv-button
        lvType="link"
        lvSize="auto"
        *ngIf="lvShowNowButton"
        [disabled]="disabledTodayButton"
        (click)="selectToday()"
      >
        {{ i18n.get('justNow') }}
      </button>
      <button
        lv-button
        lvType="primary"
        lvSize="auto"
        *ngIf="lvOpenObserver"
        [disabled]="checkDateDisableStatus(value)"
        (click)="triggerOk()"
      >
        {{ i18n.get('ok') }}
      </button>
    </ng-container>
  </div>
</div>
